<template>
	<div>
		<DetailHead></DetailHead>
		<DetailSwiper :images="images" :lists="lists"></DetailSwiper>
		<DetailBack></DetailBack>
		<DetailDress></DetailDress>
		<Detailimage></Detailimage>
		<DetailFoot :lists="lists"></DetailFoot>
	</div>
</template>

<script>
	import DetailHead from '@/components/details/DetailHead.vue'
	import DetailSwiper from '@/components/details/DetailSwiper.vue'
	import DetailBack from '@/components/details/DetailBack.vue'
	import DetailDress from '@/components/details/DetailDress.vue'
	import DetailFoot from '@/components/details/DetailFoot.vue'
	import Detailimage from '@/components/details/Detailimage.vue'
	import { mapGetters } from 'vuex'
	export default {
		components:{
		   DetailHead,
		   DetailSwiper,
		   DetailBack,
		   DetailDress,
		   Detailimage,
		   DetailFoot
		},
		data(){
			return{
				images:[],
				lists:[]
			}
		},
		computed: {
	    ...mapGetters([
	      'details'
	    ])
	  },
	  created() {
		  let id = this.$route.query.id
		  console.log(id)
	  	this.$store.dispatch("vuexDetail",id)
	  	.then(e=>{
	  	  console.log(e)
		  this.images = e.data.data.imgList
	  		  this.lists = e.data.data
	  	})
	  },
	}
</script>

<style>
</style>
